<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SSM-Blog</title>

	<link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:300,400">  <!-- Google web font "Open Sans" -->
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/bootstrap.min.css">                                      <!-- Bootstrap style -->
    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/templatemo-style.css">    
    <script src="${pageContext.request.contextPath}/static/javascript/index.js"></script>
   <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap.min.css">

<style type="text/css">
body, ul, li, ol,form,img,a{margin:0; padding:0; border:0; list-style:none;}
	/*banner*/
.banner{
 	width:870px;
 	height:350px;
 	margin:13px auto 15px auto;
 	position:relative;
 	overflow: hidden;
 	padding-top:10px;
 }
 .banner .banner_pic .pic{display:none;}
 .banner .banner_pic .current{display:block;}
 .banner ol{
 	position:absolute;
 	left:400px;
 	bottom:26px;
 }
 .banner ol .but{
 	float:left;
 	width:10px;
 	height:20px;
 	border:1px solid #FF7101;
 	margin-right:12px;
 	text-align:center;
 	line-height:22px;
 	background:#fff;
 	color:#FF7101;
 	font-size:14px;
 	font-weight:bold;
 }
 .banner ol li{cursor:pointer;}
 .banner ol .current{
 	color:#fff;
 	background:#FF7101;
 	float:left;
 	width:10px;
 	height:20px;
 	border:1px solid #FF7101;
 	margin-right:12px;
 	text-align:center;
 	line-height:22px;
 	font-size:14px;
 	font-weight:bold;
 }
 
#back-to-top{
	position: fixed;
    right: 50px;
    bottom: 20px;
    background: /* rgba(230, 126, 34, 0.6) */black;
    color: #ffffff;
    text-align: center;
    border-radius: 2px;
    z-index: 1;
    display: none;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}


/*banner*/



</style>

</head>
<body>

<body>
       
        <div class="tm-header">
            <div class="container-fluid">
                <div class="tm-header-inner">
                    <a href="#" class="navbar-brand tm-site-name">SSM-Blog</a>
                    
                   
                </div>                                  
            </div>            
        </div>
		
        <div class="blog-img-container">
            <%-- <img src="${pageContext.request.contextPath }/static/img/tm-blog-img.jpg" alt="Image"> --%>
        </div>

            <div class="container-fluid">
                <div class="row">
					
			<div class="navbar navbar-inverse navbar-fixed-top">
			      <div class="navbar-inner">
			        <div class="container">
			          <a class="brand" href="${pageContext.request.contextPath }/index">屌丝的日记本</a>
			        
			          <form name="myForm" class="navbar-form pull-right" method="post" action="#">
						  <input class="span2" id="s_title" name="s_title"  type="text" style="margin-top:5px;height:30px;" placeholder="往事如烟...">
						  <button type="submit" class="btn" onkeydown="if(event.keyCode==13) myForm.submit()"><i class="icon-search"></i>&nbsp;搜索日志</button>
					  </form>
			        </div>
			      </div>
			</div>
	
					<div class="navbar-toggleable-sm" id="tmNavbar">
                            <ul class="nav navbar-nav">
                                <li class="nav-item">
                                    <a href="${pageContext.request.contextPath }/index" class="nav-link">网站首页</a>
                                </li>
                                <li class="nav-item">
                                    <a href="${pageContext.request.contextPath }/aboutme" class="nav-link">关于博主</a>
                                </li>
                                <li class="nav-item active">
                                    <a href="${pageContext.request.contextPath }/diary/page/${1}" class="nav-link">日志首页</a>
                                </li>
                                <li class="nav-item">
                                    <a href="http://www.lyjnews.iego.cn/goIndex" class="nav-link">我的网站</a>
                                </li>
                            </ul>                        
                        </div>
					
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9">
                        <div class="tm-blog-post">
                                         	
                            <h3 class="tm-gold-text">日记列表</h3>
			
				<!--nav end-->
				<!--banner begin-->
						<div class="banner">
							<div class="banner_pic" id="banner_pic">
								<div class="current"><a href="${pageContext.request.contextPath }/index"><img src="${pageContext.request.contextPath }/static/img/tm-img-1010x336-1.jpg" alt="" /></a></div>
								<div class="pic"><a href="${pageContext.request.contextPath }/diary/page/${1}"><img src="${pageContext.request.contextPath }/static/img/jss01.jpg" alt="" /></a></div>
								<div class="pic"><a href="${pageContext.request.contextPath }/diary/page/${1}"><img src="${pageContext.request.contextPath }/static/img/jss04.jpg" alt="" /></a></div>
								<div class="pic"><a href="${pageContext.request.contextPath }/diary/page/${1}"><img src="${pageContext.request.contextPath }/static/img/jss02.jpg" alt="" /></a></div>
							</div>
							<ol id="button">
								<li class="current">1</li>
								<li class="but">2</li>
								<li class="but">3</li>
								<li class="but">4</li>
							</ol>
						</div>
				<!--banner end-->
				<!--stages begin-->
				
                            <jsp:include page="${mainPage }" />
                        </div>
                        
                        <div class="row tm-margin-t-big">
                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">

                                <div class="tm-content-box">
                                
                                    <img src="${pageContext.request.contextPath }/static/img/tm-img-310x180-1.jpg" alt="Image" class="tm-margin-b-30 img-fluid">
                                    <h4 class="tm-margin-b-20 tm-gold-text">“Count it the greatest sin to prefer life to honor, and for the sake of living to lose what makes life worth having.”</h4>
                                    <p class="tm-margin-b-20">「最大的罪惡是把生命放在榮譽之上，為了生存而放棄值得繼續生存的東西。」– 尤維納 (詩人)</p>
                                    <a href="http://www.dailyenglishquote.com/2017/04/juvenal-2/" class="tm-btn text-uppercase">阅读全文</a>    
                                </div>  

                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">

                                <div class="tm-content-box">
                                    <img src="${pageContext.request.contextPath }/static/img/tm-img-310x180-2.jpg" alt="Image" class="tm-margin-b-30 img-fluid">
                                    <h4 class="tm-margin-b-20 tm-gold-text">“Do not pray for an easy life, pray for the strength to endure a difficult one.”</h4>
                                    <p class="tm-margin-b-20">「不要祈求安逸的人生，祈求擁有撐過艱難的力量。」– 李小龍 (武術家)</p>
                                    <a href="http://www.dailyenglishquote.com/2017/04/bruce-lee-4/" class="tm-btn text-uppercase">阅读全文</a>    
                                </div>  

                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">

                                <div class="tm-content-box">
                                    <img src="${pageContext.request.contextPath }/static/img/tm-img-310x180-3.jpg" alt="Image" class="tm-margin-b-30 img-fluid">
                                    <h4 class="tm-margin-b-20 tm-gold-text">“Any man worth his salt will stick up for what he believes right, but it takes a slightly better man to acknowledge instantly and without reservation that he is in error.”</h4>
                                    <p class="tm-margin-b-20">「任何有尊嚴的人都能捍衛自己的信念，但層次更高一點的人，才能毫無保留的立即承認錯誤。」– 安德魯·傑克森 (美國第 7 任總統)</p>
                                    <a href="http://www.dailyenglishquote.com/2017/04/andrew-jackson/" class="tm-btn text-uppercase">阅读全文</a>    
                                </div>  

                            </div>    
                        </div>
                        
                    </div>
                    

                    <aside class="col-xs-12 col-sm-12 col-md-4 col-lg-3 col-xl-3 tm-aside-r">

                        <div class="tm-aside-container">
                            <h3 class="tm-gold-text tm-title" style="text-align: center;">
                                	博主信息
                            </h3>
                            <nav>
                                <ul class="nav" style="text-align: center;">
                                     <img src="${pageContext.request.contextPath }/static/img/${user.imageName }" alt="Image" class="tm-margin-b-30 img-fluid">
                                   	<li >${user.nickName }</li>
                                    <li >${user.mood }</li>
                                </ul>
                            </nav>
                            <hr class="tm-margin-t-small">   
                            <h3 style="text-align: center;" class="tm-gold-text tm-title tm-margin-t-small">
                               		 日志类别标签
                            </h3>
                            <nav>   
                                <ul class="nav">
                                  <c:forEach var="diaryType" items="${diaryTypeList }">
                                    <li style="text-align: center;"><a href="${pageContext.request.contextPath }/diaryType/diaryTypeId/${diaryType.diaryTypeId}/page/${1}" class="tm-text-link">${diaryType.typeName }</a></li>
                                  </c:forEach>
                                </ul>
                            </nav>   
                            <hr class="tm-margin-t-small"> 

                            <div class="tm-content-box tm-margin-t-small">
                                <p class="tm-text-link"><h4 style="text-align: center; color: green;" class="tm-margin-b-20 tm-thin-font">友情链接</h4></p>
                                <p style="text-align: center;"  class="tm-margin-b-30"><a href="http://www.jidc.cn/">韩国服务器租用</a></p>
                                <p style="text-align: center;" class="tm-margin-b-30"><a href="http://www.itheima.com/">java教程</a></p>
                                <p style="text-align: center;" class="tm-margin-b-30"><a href="http://www.javaxxz.com/">Java学习者论坛</a></p>
                            </div>
                           
                    </aside>

                </div>
                
                <jsp:include page="/background/common/foot.jsp"/> 
                
               	   <a href="#" id="back-to-top" style="display:block">
						<i class="fa">
							跳到顶部
						</i>	
					</a>
                
            </div>
        </section>
        
        <footer class="tm-footer">
            <div class="container-fluid">
                <div class="row">
                    
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                        
                        <div class="tm-footer-content-box">
                            <h3 class="tm-gold-text tm-title tm-footer-content-box-title">标签云</h3>
                            <div class="tm-gray-bg">
                               <p>我的标签</p> 
                            </div>    
                        </div>
                                                
                    </div>

                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                        <div class="tm-footer-content-box tm-footer-links-container">
                        
                            <h3 class="tm-gold-text tm-title tm-footer-content-box-title">Nulla tortor dolor</h3>
                            <nav>
                                <ul class="nav">
                                    <li><a href="#" class="tm-footer-link">Tincidunt non faucibus</a></li>
                                </ul>
                            </nav>

                        </div>
                        
                    </div>

                    <!-- Add the extra clearfix for only the required viewport 
                        http://stackoverflow.com/questions/24590222/bootstrap-3-grid-with-different-height-in-each-item-is-it-solvable-using-only
                    -->
                    <div class="clearfix hidden-lg-up"></div>

                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">

                        <div class="tm-footer-content-box">
                        
                            <h3 class="tm-gold-text tm-title tm-footer-content-box-title">Etiam mollis ornare</h3>
                            <p class="tm-margin-b-30">Aenean cursus tellus mauris, quis consequat mauris dapibus id. Donec scelerisque porttitor pharetra.</p><hr class="tm-margin-b-30">
                            <a href="#" class="tm-btn tm-btn-gray text-uppercase">Read More</a>

                        </div>
                        
                    </div>

                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">

                        <div class="tm-footer-content-box">
                        
                            <h3 class="tm-gold-text tm-title tm-footer-content-box-title">Fusce non turpis</h3>
                            <div class="tm-margin-b-30">
                                <img src="${pageContext.request.contextPath }/static/img/tm-img-100x100-1.jpg" alt="Image" class="tm-footer-thumbnail">
                                <img src="${pageContext.request.contextPath }/static/img/tm-img-100x100-2.jpg" alt="Image" class="tm-footer-thumbnail">
                            </div>
                            <a href="#" class="tm-btn tm-btn-gray text-uppercase">Browse</a>

                        </div>
                        
                    </div>
                    
					
					
                </div>

                <div class="row">
                    <div class="col-xs-12 tm-copyright-col">
                        <p class="tm-copyright-text">Copyright 2017 MY Company Name L Y J</p>
                    </div>
                </div>
            </div>
        </footer>

        <!-- load JS files -->
        <script src="${pageContext.request.contextPath }/static/js/jquery-1.11.3.min.js"></script>             <!-- jQuery (https://jquery.com/download/) -->
        <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h --> 
        <script src="${pageContext.request.contextPath }/static/js/bootstrap.min.js"></script>                 <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
       
</body>

</body>
</html>